import React, { useState } from 'react';
import IconFont from '../IconFont';
import styles from './index.less';
import moment from 'moment';
import { useWindowSize } from '@/utils/windowsize';
import { mmConversionPx } from '@/utils/transpxmm';


function Asharpe({ config, setconfig, collapsed, layer }) {
    const { width, height } = useWindowSize();//设备宽高


    const dashedcomp = (type, it) => {
        let base = it.width > it.height ? it.height : it.width;
        base = it.unit == "mm" ? mmConversionPx(base) : base;
        return {
            type,
            id: moment().valueOf(),
            style: {
                zIndex: it.components.length + 1,
                left: 0,
                top: base / 2,
                backgroundColor: "transparent",
                borderRadius: 0,
                width: base / 2,
                height: 10,
                borderBottomStyle: "dashed",
                borderBottomWidth: 4,
                borderBottomColor: "rgba(29,172,87,1)",
                rotate: 0
            },
        }
    }

    const arrowcomp = (type, it) => {
        let base = it.width > it.height ? it.height : it.width;
        base = it.unit == "mm" ? mmConversionPx(base) : base;
        return {
            type,
            id: moment().valueOf(),
            style: {
                zIndex: it.components.length + 1,
                left: 0,
                top: 0,
                backgroundColor: "transparent",
                width: base / 2,
                height: (base / 2) / 6.2,
                color: "rgba(29,172,87,1)",
                rotate: 0
            },
        }
    }


    const squarecomp = (type, it) => {
        let base = it.width > it.height ? it.height : it.width;
        base = it.unit == "mm" ? mmConversionPx(base) : base;
        return {
            type,
            id: moment().valueOf(),
            style: {
                zIndex: it.components.length + 1,
                left: 0,
                top: 0,
                backgroundColor: "rgba(29,172,87,1)",
                width: base / 2,
                height: base / 4,
                borderRadius:0
            },
        }
    }


    return (
        <div className={styles.container}>
            <div className={`${styles.item} center`} onClick={() => {
                setconfig(s => {
                    let newcf = { ...s };
                    newcf.pages = newcf.pages.map(it => {
                        if (it.active) {
                            it.components = it.components ?? [];
                            it.components.push(dashedcomp("Dashed", it))
                        }
                        return it
                    })
                    return newcf
                })
            }}>
                <div className="center" >
                    <IconFont type='icon--xuxian' style={{ color: "#1dac57" }}></IconFont>
                    <span>
                        虚线
                    </span>
                </div>

                <div className={styles.row} style={{ width: 0, height: 100, overflow: "hidden", transition: "all 0.2s" }}>
                    <div style={{ width: 100, height: 1, flexShrink: 0, overflow: "hidden" }}>
                        <div style={{ border: "2px dashed #1dac57" }}>
                        </div>
                    </div>
                </div>
            </div>

            <div className={`${styles.item} center`} onClick={() => {
                setconfig(s => {
                    let newcf = { ...s };
                    newcf.pages = newcf.pages.map(it => {
                        if (it.active) {
                            it.components = it.components ?? [];
                            it.components.push(arrowcomp("Arrow", it))
                        }
                        return it
                    })
                    return newcf
                })
            }}>
                <div className="center">
                    <IconFont type='icon-youjiantou' style={{ color: "#1dac57", fontSize: 16 }}></IconFont>
                    <span>
                        箭头
                    </span>
                </div>

                <div className={styles.column} style={{ width: 0, height: 100, overflow: "hidden", transition: "all 0.2s" }}>
                    <IconFont type='icon-youjiantou' style={{ color: "#1dac57", fontSize: 36 }}></IconFont>
                </div>
            </div>


            <div className={`${styles.item} center`} onClick={() => {
                setconfig(s => {
                    let newcf = { ...s };
                    newcf.pages = newcf.pages.map(it => {
                        if (it.active) {
                            it.components = it.components ?? [];
                            it.components.push(squarecomp("Square", it))
                        }
                        return it
                    })
                    return newcf
                })
            }}>
                <div className="center">
                    <IconFont type='icon-gf-rectangle' style={{ color: "#1dac57", fontSize: 16 }}></IconFont>
                    <span>
                        矩形
                    </span>
                </div>

                <div style={{ width: 0, height: 100, overflow: "hidden", transition: "all 0.2s" }}>
                    <div style={{ width: 100, height: 68, overflow: "hidden", backgroundColor: "#1dac57" }}>

                    </div>
                </div>
            </div>

        </div>
    );
}

export default Asharpe;